import { RetweetOutlined } from "@ant-design/icons"
import { Button, Divider, Flex, Typography } from "antd"
import { FC, useCallback, useEffect, useState } from "react"

import { queryBankCard } from "@/api/member"
import { IMemberParams } from "@/api/risk/types"
import { DataList } from "@/components/common"
import { useOptions } from "@/hooks"
import { useLocale } from "@/locales"

import { BankCardContainer } from "./styles"
import { columnsBankCard, columnsVirtualCurrency, columnsWhiteHorse } from "./TableInfo"

export const BankCard: FC<{ data: IMemberParams }> = ({ data }) => {
	const [dataBankCard, setDataBankCard] = useState<any>()
	const { formatMessage } = useLocale()
	const optionsBindStatus = useOptions({ modal: "proxyWalletType", func: formatMessage })

	const handleGetBankCard = useCallback(async () => {
		const body = {
			businessModel: data.businessModel,
			clubId: data.clubId,
			currency: data.currency,
			merchantId: data.merchantId,
			topProxyName: data.topProxyName,
			userId: data.userId,
			userName: data.username
		}
		const [err, bankCardInfo] = await queryBankCard({ ...body })
		if (!err) setDataBankCard(bankCardInfo)
	}, [data])
	const listColumns = [
		{
			title: formatMessage({ id: "member.bank_card_table_name" }),
			columns: columnsBankCard(formatMessage),
			data: dataBankCard?.bankCardRespDTOS || []
		},
		{
			title: formatMessage({ id: "member.virtual_currency_account_information_table_name" }),
			columns: columnsVirtualCurrency(formatMessage),
			data: dataBankCard?.virtualAccountRespDTOS || []
		},
		{
			title: formatMessage({ id: "member.white_horse_club_account_information_table_name" }),
			columns: columnsWhiteHorse(formatMessage, optionsBindStatus),
			data: dataBankCard?.bmhAccountRespDTOS || []
		}
	]

	useEffect(() => {
		// this will help to refresh pagination when upper actions are changed
		if (data.userId) handleGetBankCard()
	}, [data])

	useEffect(() => {
		handleGetBankCard()
	}, [])

	return (
		<BankCardContainer>
			<Flex gap={10}>
				<Button type="dashed">{formatMessage({ id: "member.tabs.bankd_card" })}</Button>
				<Button icon={<RetweetOutlined />} onClick={handleGetBankCard} type="primary">
					{formatMessage({ id: "member.refresh" })}
				</Button>
			</Flex>
			<Divider />
			<Flex vertical gap={20}>
				{listColumns.map(item => (
					<Flex key={item.title} vertical gap={10}>
						<Typography>{item.title}</Typography>
						<DataList maxHeight="300px" data={item.data} columns={item.columns} bordered size="middle" rowKey="id" />
					</Flex>
				))}
			</Flex>
		</BankCardContainer>
	)
}
